<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <!-- 列表 -->
    <el-card
      shadow="never"
      style="margin: 20px;"
    >
      <el-button
        type="warning"
        style="margin-bottom:20px"
        @click="handleAddWorkingMode()"
      >添加工作模式</el-button>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;"
      >
        <el-table-column
          label="工作模式编号"
          prop="id"
          width="283"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
          width="281"
        ></el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
          width="281"
        ></el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
        ></el-table-column>
        <el-table-column
          prop="workHour"
          label="工作时间"
          width="132"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="165"
          align="center"
        >
          <template #default="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="handleAddWorkingMode(scope.row.id)"
            >编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="danger"
              :underline="false"
              @click="handleDelWorkModel(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div
        v-show="tableData && tableData.length > 0"
        class="pagination"
      >
        <div class="pages">
          <el-pagination
            :current-page="Number(query.page)"
            :total="Number(total)"
            :page-size="Number(query.pageSize)"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <!-- 新增工作模式 -->
    <newWorkingModeAdd
      ref="newWorkingModeAdd"
      :worship-system-form="worshipFormData"
      :continuous-system-form="continuousFormData"
      :add-new-work-mode-worship-flag="newWorkModeWorshipFlag"
      :add-new-work-mode-continuous-flag="newWorkModeContinuousFlag"
      :active-name-son="activeName"
      :title-info="titleInfo"
      @newDataes="getListDia"
      @changeTab="changeTab"
    ></newWorkingModeAdd>
  </div>
</template>

<script>
import { workHistoryList, workHistoryInfo, deleteWorkHistory } from '@/api/transit'
import newWorkingModeAdd from './components/new-working-mode-add.vue'
export default {
  components: {
    newWorkingModeAdd
  },
  data() {
    return {
      query: {
        page: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      worshipFormData: {
        name: '',
        //   多选
        checkList: [],
        workTime: ['09:00', '18:00']
      },
      continuousFormData: {
        name: '',
        work: '',
        rest: '',
        workTime: ['09:00', '18:00']
      },
      newWorkModeWorshipFlag: true,
      newWorkModeContinuousFlag: true,
      activeName: 'first',
      //   星期天列表
      weekList: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
      // 弹窗标题
      titleInfo: {
        text: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.loading = true
      const res = await workHistoryList(this.query)
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.tableData.forEach((item) => {
        item.workHour = ((item.workEndMinute1 - item.workStartMinute1) / 60).toFixed(2) + '小时'
      })
      this.loading = false
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.query.page === 1
      this.query.pageSize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    // 打开新增工作模式弹窗
    async handleAddWorkingMode(id) {
      if (id) {
        // 编辑
        this.titleInfo.text = '编辑工作模式'
        const res = await workHistoryInfo(id)
        // 连续制场景
        if (res.data.workPatternType === 2) {
          this.activeName = 'second'
          this.newWorkModeWorshipFlag = false
          this.newWorkModeContinuousFlag = true
          this.continuousFormData.name = res.data.name
          this.continuousFormData.id = res.data.id
          this.continuousFormData.work = res.data.workDayNum
          this.continuousFormData.rest = res.data.restDayNum

          this.continuousFormData.workTime.forEach((item, index) => {
            if (index === 0) {
              this.continuousFormData.workTime[index] = String(this.minuteToHour(res.data.workStartMinute1))
            } else if (index === 1) {
              this.continuousFormData.workTime[index] = String(this.minuteToHour(res.data.workEndMinute1))
            }
          })
        } else {
          // 礼拜制场景
          this.activeName = 'first'
          this.newWorkModeWorshipFlag = true
          this.newWorkModeContinuousFlag = false

          // 对数据进行赋值
          this.worshipFormData.name = res.data.name
          this.worshipFormData.id = res.data.id
          this.worshipFormData.workTime.forEach((item, index) => {
            if (index === 0) {
              this.worshipFormData.workTime[index] = String(this.minuteToHour(res.data.workStartMinute1))
            } else if (index === 1) {
              this.worshipFormData.workTime[index] = String(this.minuteToHour(res.data.workEndMinute1))
            }
          })
          this.worshipFormData.checkList = []
          this.weekList.forEach(item => {
            if (res.data[item] === 1) {
              this.worshipFormData.checkList.push(item)
            }
          })
        }
      } else {
        // 新增
        this.titleInfo.text = '新增工作模式'
        this.newWorkModeContinuousFlag = true
        this.newWorkModeWorshipFlag = true
        this.activeName = 'first'
        this.worshipFormData = {
          id: '',
          name: '',
          //   多选
          checkList: [],
          workTime: ['09:00', '18:00']
        }
        this.continuousFormData = {
          id: '',
          name: '',
          work: '',
          rest: '',
          workTime: ['09:00', '18:00']
        }
      }
      this.$refs.newWorkingModeAdd.dialogFormV()
    },
    // 子组件新增或编辑成功，通知父组件更新列表
    getListDia() {
      this.getList()
    },
    // 分钟转换为时分
    minuteToHour(minute) {
      let hour = minute / 60 % 24
      hour = hour < 10 ? '0' + hour : hour
      let minute1 = minute % 60
      minute1 = minute1 < 10 ? '0' + minute1 : minute1
      return hour + ':' + minute1
    },
    changeTab(val) {
      this.activeName = val
    },
    // 删除数据
    handleDelWorkModel(id) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.change(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    async change(id) {
      await deleteWorkHistory(id).then((res) => {
        // 异常不处理，信息不外抛。。。。
        if (String(res.code) === '200') {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination{
  margin-top: 20px;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
::v-deep .el-button.el-button--warning {
  width: 140px;
}
</style>
